<template>
    <div>
      <div class="top">
        <div class="aa">
          <section>
            <h3>女装</h3>
          </section>
          <section>
            <span><a href="#/Sto2Nav">凉鞋</a></span>
            <span><a href="#/Sto2Nav">单鞋</a></span>
            <span><a href="#/Sto2Nav">拖鞋</a></span>
            <span><a href="#/Sto2Nav">运动鞋</a></span>
            <span><a href="#/Sto2Nav">帆布鞋</a></span>
          </section>
        </div>
        <div class="zz">
          <div class="zb">
            <img src="../assets/04.png" alt="">
          </div>
          <div class="yb">
              <div class="block">
                <el-carousel >
                  <el-carousel-item v-for="item in 4" :key="item">
                    <ul>
                      <li v-for="show in data">
                        <img :src="show.image_url" alt="">
                        <p>{{show.name}}</p>
                        <span>￥{{show.price}}</span>
                      </li>
                    </ul>
                  </el-carousel-item>
                </el-carousel>
            </div>
            <div class="zz">
              <ul>
                <li v-for="s in ww"><img :src="s" alt=""></li>
              </ul>
              <ul>
                <li v-for="a in tt">
                  <section>
                    <p>{{a.cc}}</p>
                    <p>{{a.vv}}</p>
                  </section>
                  <img :src="a.img" alt="">
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="aa">
          <h3>女鞋&包包</h3>
          <ul>
            <li v-for="xx in list">{{xx.cate1Name}}</li>
          </ul>
        </div>
        <div class="zz">
          <div class="left" v-for="ww in lia" >
            <img :src="ww.tu" alt="">
          </div>
          <div class="block" >
            <el-carousel arrow="never">
              <el-carousel-item v-for="item in 4" :key="item">
                <ul >
                  <li v-for="ll in liz">
                    <img :src="ll.image_url" alt="">
                    <p>{{ll.spname}}</p>
                    <span>￥{{ll.price}}</span>
                  </li>
                </ul>
              </el-carousel-item>
            </el-carousel>
          </div>
          <div class="right">
            <div>
                <h3>热销商品推荐</h3>
                <span class="el-icon-refresh">换一批</span>
            </div>
            <ul>
              <li v-for="ss in liz">
                <img :src="ss.image_url" alt="">
                <div>
                  <p>{{ss.spname}}</p>
                  <span>￥{{ss.price}}</span>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  import datas from '../nvz'
  import lists from '../list'
    export default {
        data: function () {
            return {
              data:datas.data,
              list:lists.data.cate1Info,
              liz:lists.data.cate2Info,
              lia:lists.data.cate3Info,
              ww:[
                'https://s10.mogucdn.com/mlcdn/c45406/190507_7759g7g4ij1jl9gk5hb6f3116k212_940x226.jpg_999x999.v1c0.81.webp',
                'https://s10.mogucdn.com/mlcdn/c45406/190220_070jbge5cae35i143e71l5jil1594_460x226.jpg_999x999.v1c0.81.webp',
                'https://s10.mogucdn.com/mlcdn/c45406/190220_0gb1bk2c4731geb35kl8453g9gbg3_460x226.jpg_999x999.v1c0.81.webp',
                'https://s10.mogucdn.com/mlcdn/c45406/190507_8f2l1j332gf5100ibl51dad40ak3k_460x226.jpg_999x999.v1c0.81.webp'
              ],
              tt:[
                {
                  cc:'时尚套餐',
                  vv:'懒人穿搭 轻松搞定',
                img:'https://s10.mogucdn.com/mlcdn/c45406/190220_3d6544f8533bged07lbgcbga5i4ka_375x375.jpg_180x180.v1cAC.40.webp'},
                {
                  cc:'牛仔裤',
                  vv:'传出你的大长腿',
                  img:'https://s10.mogucdn.com/mlcdn/c45406/181031_11cb7d8k8hiik2d2g60fghbb02266_1125x1125.png_180x180.v1cAC.40.webp'},
                {
                  cc:'衬衫',
                  vv:'气质UP美翻天',
                img:'https://s10.mogucdn.com/mlcdn/c45406/190220_8b4dfj3dh8ej0g7g9329l5h15l0jk_375x413.png_180x180.v1cAC.40.webp'},
                {
                  cc:'显瘦裙装',
                  vv:'遮肉巧搭视觉显瘦',
                  img:'https://s10.mogucdn.com/mlcdn/c45406/190220_136glli0e407c9173l5823lf2530k_375x375.jpg_180x180.v1cAC.40.webp'},
                {
                  cc:'开衫外套',
                  vv:'春季衣柜必备单品',
                  img:'https://s10.mogucdn.com/mlcdn/c45406/190220_09110a5glfjihif03i709c56hih8h_375x411.png_180x180.v1cAC.40.webp'},
                {
                  cc:'百搭卫衣',
                  vv:'春季新品休闲百搭、',
                  img:'https://s10.mogucdn.com/mlcdn/c45406/190220_5gk1aj85lh3112f6j8gdbk59dj1hf_375x398.png_180x180.v1cAC.40.webp'}
              ]
            }
        },


    }
</script>

<style scoped>
  .top{
    width: 90%;
    margin: 0 auto;
    /*background: orange;*/
    padding-top: 30px;
  }
  .top .aa{
    overflow: hidden;
  }
  .top .aa section{
    float: left;
  }
  .top .aa section:first-child h3{
    text-align: left;
    border-left: solid 7px red;
    padding-left: 10px;
    font-size: 25px;
  }
  .top .aa section:last-child{
    margin-left: 20px;
    margin-top: 10px;
  }
  .top .aa section:last-child span{
    border-right: solid 1px #000;
    padding: 0 20px;
    cursor: pointer;
    font-size: 14px;
  }
  .top .aa section span a{
    color:#000;
  }
  .top .zz{
    overflow: hidden;
    margin-top: 10px;
  }
  .top .zz .zb{
    float: left;
  }
  .top .zz .yb{
    float: left;
    width: 83%;
    margin-left: 1.5%;
  }
  .top .zz .yb .el-carousel >>> .el-carousel__indicators{
    display: none !important;
  }
  .top .zz .yb .el-carousel >>> .el-carousel__container{
    height: 380px !important;
  }
  .top .zz .yb .block{
    /*background: gray;*/
    width: 100%;
  }
  .top .zz .yb .block ul{
    overflow: hidden;
    /*height: 500px;*/
    /*width: 4000px;*/
    margin-top: -1%;
  }
  .top .zz .yb .block li{
    margin: 1% 0.8%;
    float: left;
    width: 15%;
    height: 360px;
    /*border: solid 1px #000;*/
    background: #fff;
    overflow: hidden;
  }
  .top .zz .yb .block li img{
    /*border: solid 1px orange;*/
    margin-left: 1px;
    width: 90%;
    height: 70%;
    margin-top: 20px;
  }
  .top .zz .yb .block li p{
    width: 90%;
    height: 45px;
    margin: 0 auto;
    padding-top: 5px;
    overflow: hidden;
  }
  .top .zz .yb .block li span{
    width: 90%;
    /*margin: 0 auto;*/
    margin-left: 5%;
    margin-top: 5px;
    text-align: left;
    font-size: 22px;
    float: left;
    color: red;
  }
  .top .zz .yb .zz{
    margin-top: -10px;
  }
  .top .zz .yb .zz ul:first-child{
    overflow: hidden;
  }
  .top .zz .yb .zz ul:first-child li{
    float: left;
    width: 15%;
    height: 100px;
    margin: 0  1%;
  }
  .top .zz .yb .zz ul:first-child li:first-child{
    width: 32%;
  }
  .top .zz .yb .zz ul:first-child li img{
    width: 100%;
    height: 100%;
  }
  .top .zz .yb .zz ul:last-child{
    overflow: hidden;
    height: 90px;
  }
  .top .zz .yb .zz ul:last-child li{
    float: left;
    background: #fff;
    width: 15%;
    height: 80px;
    margin: 0.5%  1%;
    overflow: hidden;
  }
  .top .zz .yb .zz ul:last-child li section{
    text-align: left;
    float: left;
    font-size: 14px;
    color: #666666;
    padding-left: 10px;
  }
  .top .zz .yb .zz ul:last-child li section p:first-child{
    font-size:20px;
    color:#9251f4 ;
    margin-top: 10px;
    margin-bottom: 5px;
  }
  .top .zz .yb .zz ul:last-child li img{
    float: right;
    margin-top: 5%;
    width: 30%;
    height: 90%;
    transition: 1s;
  }
  .top .zz .yb .zz ul:last-child li img:hover{
    transform:translateY(-8%);
  }

  .bottom{
    width: 90%;
    margin: 0 auto;
  }
  .bottom .aa{
    /*background: orange;*/
    margin-top: 40px;
  }
  .bottom .aa h3{
    float: left;
    border-left: solid 7px red;
    padding-left: 10px;
    padding-right: 20px;
  }
  .bottom .aa ul{
    overflow: hidden;

  }
  .bottom .aa li{
    float: left;
    border-right: solid 1px #000;
    padding: 0 20px;
    margin-top: 5px;
    font-size: 14px;
  }
  .bottom .zz{
    overflow: hidden;
    width: 100%;
    margin-top: 20px;
  }
  .bottom .zz > div{
    float: left;
  }
  .bottom .zz .left{
    width: 14%;
  }
  .bottom .zz .left img{
    width: 100%;
    height: 550px;
  }
  .bottom .zz .el-carousel >>> .el-carousel__container{
    height: 550px !important;
  }
  .bottom .zz .block{
    /*border: solid 1px red;*/
    width: 60%;
    background: #fff;
  }
  .bottom .zz .block ul{
    overflow: hidden;
    margin-top: 20px;
    height: 500px;
  }
  .bottom .zz .block li{
    float: left;
    width: 20%;
    height: 250px;
    /*border: solid 1px #000;*/
    margin: 0 2.5%;
    text-align: left;
  }
  .bottom .zz .block li img{
    width: 100%;
    height: 180px;
  }
  .bottom .zz .block li p{
    font-size:14px ;
  }
  .bottom .zz .block li span{
    font-size:20px ;
    color: red;
  }
  .bottom .zz .right{
    width: 22%;
    background: #fff;
    margin-left: 2%;
    /*border: solid 1px orange;*/
    text-align: left;
    height: 550px;
  }
  .bottom .zz .right > div{
    overflow: hidden;
    width: 90%;
    margin: 0 auto;
    padding-top: 20px;
  }
  .bottom .zz .right h3{
    float: left;
  }
  .bottom .zz .right > div span{
    float: right;
  }
  .bottom .zz ul{
    width: 90%;
    height: 90%;
    margin:  0 auto;
    overflow: hidden;
  }
  .bottom .zz ul li{
    margin: 4% 0 ;
    width: 100%;
    height: 22%;
    /*border: solid 1px #000;*/
    overflow: hidden;
  }
  .bottom .zz ul li img{
    width: 30%;
    height: 80%;
    float: left;
  }
  .bottom .zz ul li > div{
    float: left;
  }
  .bottom .zz ul li p{
    margin: 5px;
    font-size: 14px;
    color: #666666;
  }
  .bottom .zz ul li span{
    text-align: left;
    font-size: 20px;
    color: red;
    margin: 5px;
  }
</style>
